<template>
  <div class="container clearfix" v-show="$route.meta.showfater">
    <div class="main">
      <p class="title">登录</p>
      <div class="input-box">
        <span>用户名</span>
        <el-input
          v-model="username"
          class="w-50 m-2"
          size="large"
          placeholder="请输入用户名"
          :prefix-icon="Avatar"
        />
      </div>
      <div class="input-box">
        <span>密码</span>
        <el-input
          v-model="password"
          class="w-50 m-2"
          size="large"
          placeholder="请输入用户名"
          :prefix-icon="View"
          show-password
        />
      </div>
      <div class="input-box">
        <span>用户类型</span>
        <el-radio-group v-model="selectedType">
          <el-radio :label="0">普通用户</el-radio>
          <el-radio :label="1">交通部门用户</el-radio>
          <el-radio :label="2">管理员</el-radio>
        </el-radio-group>
      </div>
      <el-button type="primary" @click="login">登录</el-button>
      <a
        class="register"
        href="javascript:void(0);"
        @click="$router.push('/login/register')"
        >点击注册</a
      >
    </div>
  </div>
  <router-view></router-view>
</template>

<script setup>
import { loginHttp } from '../../request/api';
import { Avatar, View } from '@element-plus/icons-vue';

let $router = useRouter();
let username = ref('');
let password = ref('');
//选中的用户类型,默认是common    0 common  1 traffic  2 admin
let selectedType = ref(0);

//登录按钮 单击事件
const login = () => {
  //用户类型从数字转成对应的字符串
  let type = ref('');
  if (selectedType.value === 0) {
    type.value = 'common';
  } else if (selectedType.value === 1) {
    type.value = 'traffic';
  } else {
    type.value = 'admin';
  }

  //判断用户名输入是否正确
  if (username.value.trim().replaceAll(' ', '') === '') {
    ElMessage({
      message: '用户名不能为空',
      type: 'warning',
    });
    return;
  }

  //判断密码
  if (password.value.trim() === '') {
    ElMessage({
      message: '密码不能为空',
      type: 'warning',
    });
    return;
  }

  //登录的api接口
  loginHttp({
    username: username.value.trim().replaceAll(' ', ''),
    password: password.value,
    type: type.value,
  }).then((res) => {
    //登录失败的提示
    if (res.data.code !== 200) {
      ElMessage({
        message: res.data.msg,
        type: 'warning',
      });
      return;
    }

    localStorage.setItem('username', username.value.trim().replaceAll(' ', ''));
    localStorage.setItem('type', type.value);
    localStorage.setItem('token', res.data.token);
    $router.push('/');
    location.reload()
  });
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/bgc.jpg');
  background-size: 100%;

  .main {
    width: 450px;
    margin: 200px auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    padding: 20px;
    border-radius: 5px;

    .title {
      font-size: 25px;
      font-weight: 600;
      text-align: center;
      color: #4d4c4c;
    }

    .input-box {
      display: flex;
      height: 40px;

      span {
        padding-right: 10px;
        width: 20%;
        text-align-last: justify;
        line-height: 40px;
      }

      .el-input {
        width: 80%;
      }

      .el-radio-group {
        width: 80%;
        display: flex;
        justify-content: space-between;
      }
    }

    .el-button {
      height: 40px;
      font-size: 16px;
    }

    .register {
      font-size: 15px;
      text-decoration: none;
      margin-left: auto;
      color: #409eff;
    }
  }
}
</style>
